<template>
  <div class="out_div">
    <div v-if="currentMode===currentModeList.LIST" class="baseList">
      <el-form class="searchForm" ref="paramsSearchForm" size="small" :model="paramsSearchForm">
        <el-row :gutter="5">
          <el-col :span="6">
            <el-form-item prop="name" label="参数名称:">
              <el-input clearable placeholder="请输入参数名称"
                        v-model="paramsSearchForm.name"
                        name="name"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button icon="el-icon-search" type="primary" size="mini"
                       @click="searchParamsHandler">查询
            </el-button>
            <el-button icon="el-icon-refresh-right" type="info" size="mini"
                       @click="resetParamsHandler">重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <toolbar @on-add="addParamsHandler" :privileges="btnPrivileges"
               :keys="[]"/>
      <paginatable :keys="['edit']" :privileges="btnPrivileges"
                   v-loading="paramsTblOpts.loading"
                   @row-edit="editParamsHandler"
                   @row-del="delParamsHandler"
                   @on-pagination="paginationParamsHandler"
                   :tblOpts="paramsTblOpts"/>
    </div>
    <el-container v-if="currentMode===currentModeList.EDIT" class="baseEdit">
      <el-header style="height: 35px;padding: 0">
        <el-row>
          <el-col :span="12">
            <el-page-header @back="backHandler" content="详情页面">
            </el-page-header>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-form v-loading="formLoading" class="editForm" size="small" label-width="100px"
                 :model="paramsEditForm"
                 ref="paramsEditForm"
                 :rules="fromRules">
          <el-form-item class="hidden" prop="id">
            <el-input v-model="paramsEditForm.id" type="hidden"/>
          </el-form-item>
          <el-row :gutter="5">
            <el-col :span="10">
              <el-form-item  label="参数名称:" prop="name">
                <el-input disabled clearable style="width: 100%"
                          v-model="paramsEditForm.name"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="10">
              <el-form-item  label="参数CODE:" prop="code">
                <el-input disabled clearable style="width: 100%"
                          v-model="paramsEditForm.code"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="10">
              <el-form-item label="参数值:" prop="value">
                <el-input clearable style="width: 100%"
                          v-model="paramsEditForm.value"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="10">
              <el-form-item label="参数备注:" prop="remark">
                <el-input clearable style="width: 100%"
                          v-model="paramsEditForm.remark"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <toolbar @on-save="saveParamsHandler" :privileges="btnPrivileges"
                 :keys="['save']"/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import paginatable from '@/components/paginatable'
import toolbar from '@/components/toolbar'
import * as tools from '@/utils/tools'
import * as paramsApi from '@/api/sys/params'
import * as menuApi from '@/api/sys/menu'

export default {
  name: 'params',
  data() {
    return {
      currentModeList: this.$config.currentShow,
      currentMode: this.$config.currentShow.LIST,
      formLoading: false,
      paramsSearchForm: {
        id: '',
        name: '',
        code: '',
        value: '',
        remark: '',
      },
      paramsEditForm: {
        id: '',
        name: '',
        code: '',
        value: '',
        remark: '',
        type: ''
      },
      fromRules: {
        name: [{required: true, message: '请输入参数名称', trigger: 'change'}],
        code: [{required: true, message: '请输入参数CODE', trigger: 'change'}],
        value: [{required: true, message: '请输入参数值', trigger: 'change'}],
        type: [{required: true, message: '请选择参数级别', trigger: 'change'}],
      },
      paramsTblOpts: {
        fitCols: true, loading: false,
        cols: [
          {
            prop: 'name',
            label: '参数名称'
          },
          {
            prop: 'type',
            label: '参数级别',
            formatter: row => {
              if (row.type === 1) {
                return '平台'
              } else {
                return '账户'
              }
            }
          },
          {
            prop: 'code',
            label: '参数CODE'
          },
          {
            prop: 'value',
            label: '参数值'
          },
          {
            prop: 'remark',
            label: '参数备注'
          },
        ],
        data: [],
        selection: []
      },
      btnPrivileges: [],
      searchParamsConditions: []
    }
  },
  components: {
    paginatable,
    toolbar
  },
  methods: {
    resetParamsHandler() {
      this.$refs.paramsSearchForm.resetFields()
      this.searchParamsHandler()
    },
    clearEdit() {
      if (this.$refs.paramsEditForm) {
        this.$refs.paramsEditForm.resetFields()
      }
    },
    backHandler() {
      this.formLoading = false
      this.currentMode = this.$config.currentShow.LIST
      this.clearEdit()
      this.searchParamsHandler()
    },
    async saveParamsHandler() {
      let valid = await this.$refs.paramsEditForm.validate()
      if (valid) {
        this.formLoading = true
        paramsApi.save(this.paramsEditForm).then(resp => {
          this.formLoading = true
          tools.notify({
            type: 'success',
            message: '保存成功'
          })
          this.backHandler()
        }).catch(resp => {
          this.formLoading = true
        })
      } else {
        tools.notify({
          type: 'warning',
          message: '请按要求填写'
        })
      }
    },
    delParamsHandler(row) {
      this.$confirm('确定要删除这条记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        paramsApi.del(row.id).then(resp => {
          this.searchParamsHandler()
          tools.notify({
            type: 'success',
            message: '删除成功'
          })
        })
      }).catch(() => {
      })
    },
    addParamsHandler() {
      this.currentMode = this.$config.currentShow.EDIT
      this.clearEdit()
    },
    editParamsHandler(row) {
      this.currentMode = this.$config.currentShow.EDIT
      this.clearEdit()
      paramsApi.load(row.id).then(resp => {
        tools.assignVal(this.paramsEditForm, resp.data)
      })
    },
    searchParamsHandler() {
      this.searchParamsConditions = []
      if (this.paramsSearchForm.name) {
        let val = this.paramsSearchForm.name
        this.searchParamsConditions.push({
          field: 'name',
          operator: 'like',
          values: val instanceof Array ? [...val] : [val]
        })
      }
      this.searchParamsConditions.push({
        field: 'type',
        operator: '=',
        values: [2]
      })
      this.paginationParamsHandler()
    },
    paginationParamsHandler(pageNo) {
      this.$set(this.paramsTblOpts, 'pageNo', pageNo || 1)
      this.paramsTblOpts.loading = true
      paramsApi.pagination(this.paramsTblOpts, this.searchParamsConditions).then(resp => {
        this.paramsTblOpts.data = resp.data.records
        Object.assign(this.paramsTblOpts, {total: Number(resp.data.total)})
        this.paramsTblOpts.loading = false
      })
    }
  },
  mounted() {
    let menuId = this.$route.meta.id
    menuApi.getMenuBtn(menuId).then(resp => {
      this.btnPrivileges = resp.data
    })
    this.searchParamsHandler()
  }
}
</script>
